import { ref } from 'vue'
import { defineStore } from 'pinia'

// 创建布局 store
export const useLayoutStore = defineStore('layout', () => {
  // 侧边栏是否折叠
  const sidebarCollapsed = ref(false)
  
  // 主题模式 (light/dark/auto)
  const layoutMode = ref<'light' | 'dark' | 'auto'>('light')
  
  // 主题颜色
  const themeColor = ref('#1890ff')
  
  // 侧边栏模式 (vertical/horizontal)
  const sidebarMode = ref<'vertical' | 'horizontal'>('vertical')
  
  // 侧边栏是否固定
  const sidebarFixed = ref(true)
  
  // 是否显示面包屑
  const showBreadcrumb = ref(true)
  
  // 是否显示顶部导航
  const showTopNav = ref(true)
  
  // 是否显示侧边栏
  const showSidebar = ref(true)
  
  // 切换侧边栏折叠状态
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
    localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value.toString())
  }
  
  // 设置侧边栏折叠状态
  const setSidebarCollapsed = (collapsed: boolean) => {
    sidebarCollapsed.value = collapsed
    localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value.toString())
  }
  
  // 切换布局模式
  const toggleLayoutMode = () => {
    layoutMode.value = layoutMode.value === 'light' ? 'dark' : 'light'
    applyLayoutMode()
  }
  
  // 设置布局模式
  const setLayoutMode = (mode: 'light' | 'dark' | 'auto') => {
    layoutMode.value = mode
    applyLayoutMode()
  }
  
  // 设置主题颜色
  const setThemeColor = (color: string) => {
    themeColor.value = color
    // 保存到本地存储
    localStorage.setItem('themeColor', color)
  }
  
  // 应用布局模式
  const applyLayoutMode = () => {
    document.documentElement.classList.toggle('dark', layoutMode.value === 'dark')
    // 保存到本地存储
    localStorage.setItem('layoutMode', layoutMode.value)
  }
  
  // 切换面包屑显示状态
  const toggleBreadcrumb = () => {
    showBreadcrumb.value = !showBreadcrumb.value
  }
  
  // 设置面包屑显示状态
  const setShowBreadcrumb = (show: boolean) => {
    showBreadcrumb.value = show
  }
  
  // 切换顶部导航显示状态
  const toggleTopNav = () => {
    showTopNav.value = !showTopNav.value
  }
  
  // 设置顶部导航显示状态
  const setShowTopNav = (show: boolean) => {
    showTopNav.value = show
  }
  
  // 切换侧边栏显示状态
  const toggleSidebarDisplay = () => {
    showSidebar.value = !showSidebar.value
  }
  
  // 设置侧边栏显示状态
  const setShowSidebar = (show: boolean) => {
    showSidebar.value = show
  }
  
  // 设置侧边栏模式
  const setSidebarMode = (mode: 'vertical' | 'horizontal') => {
    sidebarMode.value = mode
    localStorage.setItem('sidebarMode', mode)
  }
  
  // 设置侧边栏固定状态
  const setSidebarFixed = (fixed: boolean) => {
    sidebarFixed.value = fixed
    localStorage.setItem('sidebarFixed', fixed.toString())
  }
  
  // 重置主题设置
  const resetTheme = () => {
    layoutMode.value = 'light'
    themeColor.value = '#1890ff'
    sidebarMode.value = 'vertical'
    sidebarFixed.value = true
    applyLayoutMode()
    localStorage.setItem('themeColor', themeColor.value)
    localStorage.setItem('sidebarMode', sidebarMode.value)
    localStorage.setItem('sidebarFixed', sidebarFixed.value.toString())
  }
  
  // 初始化布局
  const initLayout = () => {
    // 从本地存储获取主题设置
    const savedMode = localStorage.getItem('layoutMode') as 'light' | 'dark' | 'auto' | null
    const savedColor = localStorage.getItem('themeColor')
    const savedSidebarCollapsed = localStorage.getItem('sidebarCollapsed')
    const savedSidebarMode = localStorage.getItem('sidebarMode') as 'vertical' | 'horizontal' | null
    const savedSidebarFixed = localStorage.getItem('sidebarFixed')
    
    if (savedMode) {
      layoutMode.value = savedMode
    }
    
    if (savedColor) {
      themeColor.value = savedColor
    }
    
    if (savedSidebarCollapsed) {
      sidebarCollapsed.value = savedSidebarCollapsed === 'true'
    }
    
    if (savedSidebarMode) {
      sidebarMode.value = savedSidebarMode
    }
    
    if (savedSidebarFixed) {
      sidebarFixed.value = savedSidebarFixed === 'true'
    }
    
    // 应用主题
    applyLayoutMode()
  }
  
  return {
    sidebarCollapsed,
    layoutMode,
    themeColor,
    sidebarMode,
    sidebarFixed,
    showBreadcrumb,
    showTopNav,
    showSidebar,
    toggleSidebar,
    setSidebarCollapsed,
    toggleLayoutMode,
    setLayoutMode,
    setThemeColor,
    setSidebarMode,
    setSidebarFixed,
    resetTheme,
    toggleBreadcrumb,
    setShowBreadcrumb,
    toggleTopNav,
    setShowTopNav,
    toggleSidebarDisplay,
    setShowSidebar,
    initLayout
  }
})